<!DOCTYPE html>
<html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>编辑商品</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <link rel="stylesheet" href="/css/item-edit.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form" lay-filter="formItem">
    <div class="layui-form-item">
        <label class="layui-form-label required">商品类目</label>
        <div class="layui-input-block">
            <input id="pointLabelGroup" name="cid"  type="hidden" class="layui-input" />
            <input id="pointLabelName" name="cidName" placeholder="请选择商品类目" type="text" class="layui-input" lay-verify="required" required/>
        </div>
        <div class="showChooseDiv" style="display: none;  padding: 20px">
            <div id="dept_main" style="margin-right: 2%;">
                <div id="dept_tree"></div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">商品标题</label>
        <div class="layui-input-block">
            <input  id="item-title" type="text" name="title" lay-verify="required" lay-reqtext="商品价格不能为空" placeholder="请输入商品价格" value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">商品卖点</label>
        <div class="layui-input-block">
            <textarea id="item-sellPoint" name="sellPoint" class="layui-textarea" placeholder="请输入商品卖点信息"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">商品价格</label>
        <div class="layui-input-block">
            <input  id="item-priceView" type="text" name="priceView" lay-verify="required" lay-reqtext="商品价格不能为空" placeholder="请输入商品价格" value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">库存数量</label>
        <div class="layui-input-block">
            <input id="item-num" type="text" name="num" lay-verify="required" lay-reqtext="库存数量不能为空" placeholder="请输入库存数量" value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">条形码</label>
        <div class="layui-input-block">
            <input id="item-barcode" type="text" name="barcode" placeholder="请输入条形码" value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品图片</label>
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="fileBtn">多图片上传</button>
            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;margin-left: 11.5%;">
                预览图：
                <div class="layui-upload-list" id="file"></div>
                <input type="hidden" lay-filter="file" id="image" name="image"/>
            </blockquote>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品描述</label>
        <div class="layui-input-block">
            <textarea class="layui-textarea" name="itemDesc" id="itemDesc" style="display: none">
                请在这里输入商品描述
            </textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>
<script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script  type="text/javascript" th:inline="none">
    var pageData;
    function queryItemData(data) {
        pageData = data;
    }

    setTimeout(()=>{
        layui.use(['form', 'tree', 'upload', 'layedit'], function () {
            var form = layui.form,
                layer = layui.layer,
                tree = layui.tree,
                upload = layui.upload,
                layedit = layui.layedit,
                $ = layui.$;

            var pageValue = pageData;

            //监听提交
            form.on('submit(saveBtn)', function (data) {
                var itemDesc=layedit.getContent(itemEditEditor);
                var formData = data.field;
                var param ={
                    id: pageValue.id,
                    cid: formData.cid,
                    title: formData.title,
                    sellPoint: formData.sellPoint,
                    priceView: formData.priceView,
                    price: formData.priceView,
                    num: formData.num,
                    barcode: formData.barcode,
                    image: formData.image,
                    itemDesc: itemDesc
                };
                $.post("/item/update",param, function(data){
                    if(data.status == 200){
                        layer.alert('更新商品成功!');
                        window.parent.location.reload();
                    }else{
                        layer.alert("更新商品失败!");
                    }
                });
            });

            //监听商品类目
            $("#pointLabelName").click(function(){
                layer.open({
                    type: 1,
                    title: "选择",
                    area: ['28%', '60%'],
                    content: $(".showChooseDiv"),
                    maxmin: false,
                    shadeClose: true,
                    shade: false,
                });
            });
            function getData(){
                var data = [];
                $.ajax({
                    url : '/item/cat/list',//后台数据请求地址
                    type : 'post',
                    async : false,
                    success: function(resut){
                        data = resut;
                    }
                });
                return data;
            }
            var jsonData = JSON.parse(JSON.stringify(getData()));
            var formatData = [];
            for(var item in jsonData){
                if(jsonData[item].pid === 0){
                    var tempObject = {};
                    tempObject.title = jsonData[item].name;
                    tempObject.id = jsonData[item].id;
                    tempObject.children = getChildren(tempObject.id);
                    formatData.push(tempObject);
                }
            }
            function getChildren(id){    //递归体  即对每条data逐条递归找children
                var tempArray = [];
                for(var i in jsonData){
                    if(jsonData[i].pid === id){
                        var tempChild = {};
                        tempChild.title = jsonData[i].name;
                        tempChild.id = jsonData[i].id;
                        if(selectChildren(jsonData[i].id)){   //若存在子节点，继续递归；否则为叶节点，停止递归
                            tempChild.children = getChildren(jsonData[i].id);
                        }
                        tempArray.push(tempChild);
                    }
                }
                return tempArray;
            }
            function selectChildren(id){   // 是否存在子节点
                for(var i in jsonData){
                    if(jsonData[i].pid === id){
                        return true;
                    }
                }
                return false;
            }
            tree.render({
                elem: '#dept_tree',
                data: formatData,
                id: 'treeId', //标识
                showCheckbox: false, //是否显示复选框
                onlyIconControl: true,
                click: function (obj) {
                    $("[name='cid']").val(obj.data.id);
                    $("[name='cidName']").val(obj.data.title);
                    layer.close(layer.index);
                }
            });

            //多图片上传
            upload.render({
                elem: '#fileBtn'
                ,url: '/pic/upload' //改成您自己的上传接口
                ,multiple: true
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        $('#file').append('<img src="'+ result +'" width="160" height="160" alt="'+ file.name +'" class="alayui-upload-img">')
                    });
                }
                ,done: function(res){
                    let formData = form.val("formItem");
                    let val ="";
                    if (formData.image){
                        val = formData.image + ',' +  res.url;
                    } else {
                        val = val + res.url;
                    }
                    $("#image").val(val);
                }
            });

            //商品描述-编辑器
            //构建一个默认的编辑器
            itemEditEditor = layedit.build('itemDesc');
            //编辑器外部操作
            var active = {
                content: function(){
                    alert(layedit.getContent(itemEditEditor)); //获取编辑器内容
                }
                ,text: function(){
                    alert(layedit.getText(itemEditEditor)); //获取编辑器纯文本内容
                }
                ,selection: function(){
                    alert(layedit.getSelection(itemEditEditor));
                }
            };
            $('.site-demo-layedit').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
            //自定义工具栏
            layedit.build('LAY_demo2', {
                tool: ['face', 'link', 'unlink', '|', 'left', 'center', 'right']
                ,height: 100
            });
            // 查询商品类目
            function queryTableType(data) {
                var name = '';
                $.ajax({
                    type: "get",
                    url: "/item/cat/findItemCatById",
                    data: {id: data.cid},
                    dataType: 'json',
                    success: function (result) {
                        name = result.data.name;
                        // pageValue.created = result.data.created;
                        pageValue.itemId = result.data.itemId;
                        // pageValue.updated = result.data.updated;
                    },
                    error: function (result) {
                        alert("查询失败");
                    },
                    async: false,
                });
                return name;
            }
            //页面初始化赋值
            if (pageValue) {
                $.getJSON('/item/query/item/'+pageValue.id,function(_data){
                    if(_data.status == 200){
                       let queryData = _data.data;
                        $("#pointLabelGroup").val(queryData.cid);
                        $("#item-sellPoint").val(queryData.sellPoint);
                        $("#item-title").val(queryData.title);
                        $("#item-priceView").val(queryData.price);
                        $("#item-num").val(queryData.num);
                        $("#item-barcode").val(queryData.barcode);
                        $("#image").val(queryData.image);
                        imageView(queryData.image);
                    }
                });
                $.getJSON('/item/query/item/desc/'+pageValue.id,function(_data){
                    if(_data.status == 200){
                        layedit.setContent(itemEditEditor,_data.data.itemDesc);
                    }
                });
                $("#pointLabelName").val(queryTableType(pageValue));
            }

            //商品图片回显
            function imageView(result) {
                var val = result.split(",");
                for (image in val) {
                    $('#file').append('<img src="'+ val[image] +'" width="160" height="160" class="alayui-upload-img">');
                }
            }

        });
    },100)


</script>
</body>
</html>